$MIN:0;
$MAX:30;

@for $i from $MIN through $MAX {
    .m#{$i} {
        margin: 1px * $i;
    }

    // margin horizontal
    .mh#{$i} {
        margin-left: 1px * $i;
        margin-right: 1px * $i;
    }

    // margin vertical
    .mv#{$i} {
        margin-top: 1px * $i;
        margin-bottom: 1px * $i;
    }

    // margin top
    .mt#{$i} {
        margin-top: 1px * $i;
    }

    // margin right
    .mr#{$i} {
        margin-right: 1px * $i;
    }

    // margin bottom
    .mb#{$i} {
        margin-bottom: 1px * $i;
    }

    // margin left
    .ml#{$i} {
        margin-left: 1px * $i;
    }

    .size#{$i} {
        @if $i<12 {
            font-size: 1px * 12;
        }

        @else {
            font-size: 1px * $i;
        }
    }

    .p#{$i} {
        padding: 1px * $i;
    }

    // padding horizontal
    .ph#{$i} {
        padding-left: 1px * $i;
        padding-right: 1px * $i;
    }

    // padding vertical
    .pv#{$i} {
        padding-top: 1px * $i;
        padding-bottom: 1px * $i;
    }

    // padding top
    .pt#{$i} {
        padding-top: 1px * $i;
    }

    // padding right
    .pr#{$i} {
        padding-right: 1px * $i;
    }

    // padding bottom
    .pb#{$i} {
        padding-bottom: 1px * $i;
    }

    // padding left
    .pl#{$i} {
        padding-left: 1px * $i;
    }

    .radius#{$i} {
        border-radius: 1px * $i;
    }
}